/***
 *   新闻列表展示  翻页
 *
 *   实现步骤：
 *   1、发送请求
 *   2、查看返回数据
 *   3、存数据到本地中  js jq存储个变量  vue2 data   vue3  ref|reactive  react state
 *   4、渲染页面  套模板 样式修改
 *
 */
import React, { Component } from 'react'
import axios from 'axios'
export default class App extends Component {
  state = {
    result: [],
    // 当前页数
    page: 1
  }
  componentDidMount() {
    // 发送请求
    this.loadData()
  }
  loadData = (page = 1) => {
    axios.get('https://api.jiasiyuan.cn/news?page=' + page).then((res) => {
      console.log(res)
      if (res.data.code === 200) {
        // let result = res.data.result
        // let page = res.data.page
        // 对象解构
        const { result, page } = res.data
        // 对象缩写
        this.setState({ result, page })
      }
    })
  }
  render() {
    const { result, page } = this.state
    return (
      <div>
        <button onClick={() => this.loadData(page - 1)} disabled={page === 1}>
          上一页
        </button>
        {page}
        <button onClick={() => this.loadData(page + 1)} disabled={page === 10}>
          下一页
        </button>
        <ul>
          {result.map((item, index) => (
            <li key={index}>{item.title}</li>
          ))}
        </ul>
      </div>
    )
  }
}
